<template>
  <div class='enVideoHunter'>
    <main>
      <section class="banner">
        <div class="container">
          <div class="flex-content">
            <div class="en_desc">
              <h1>VideoHunter</h1>
              <p>
                <span>A Reliable and High-quality Any </span>
                <span>Video Downloader for</span>
                <span>Windows/Mac</span>
              </p>
            </div>
            <div class="banner-pic">
              222
            </div>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script>

export default {
  name: 'enVideoHunter',
  components: {

  },
  // 定义属性
  data () {
    return {

    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
  },
  // 方法集合
  methods: {

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
}
</script>

<style lang='scss'>
.VideoHunter {
}
main {
  .banner {
    width: 100%;
    position: relative;
    &:before {
      content: " ";
      position: absolute;
      top: -450px;
      width: 100%;
      height: 1068px;
      left: calc(50% - 49px);
      border-radius: 100%;
      background: linear-gradient(
        179.41deg,
        #2da6b7 9.3%,
        rgba(82, 202, 195, 0) 99.49%
      );
      z-index: -2;
    }
    .container {
      max-width: 1086px;
      margin: auto;
      .flex-content {
        display: flex;
        .en_desc {
          font-size: 16px;
          line-height: 24px;
          color: #777;
          h1 {
            font-size: 56px;
            line-height: 76px;
          }
          p {
            span {
              display: inline-block;
              font-size: 24px;
              line-height: 36px;
              margin-top: 17px;
              text-align: center;
            }
          }
        }
        .banner-pic {
          width: 535px;
          height: 507px;
        }
      }
    }
  }
}
</style>